<template>
    <svg class="icon" :class="size" :style="{color: color}" aria-hidden="true">
      <use :xlink:href="'#icon-'+name"></use>
    </svg>
</template>

<script setup lang="ts">
interface propIcon {
  name: string,
  size?: string,
  color?: string
}

withDefaults(defineProps<propIcon>(),{
  name: "kefu",
  size: "sm",  // sm小号 md中号 lg大号
  color: "#646464"
});

</script>

<style lang="scss" scoped>

.icon {
  fill: currentColor;  // 填充色
  overflow: hidden;
}
.sm{
  width: 20px;
  height: 20px;
}
.md{
  width: 40px;
  height: 40px;
}
.lg{
  width: 80px;
  height: 80px;
}
</style>